<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title" @click="secKeyAdd('1')">视频详情</view>
		</view>
		<view class="body" v-if="isrefresh" style="overflow-x:hidden;">
			<video id="myVideo" class="body-video" v-if="isrefresh && !iszlbios" :src="url" :poster="video.hPic" ></video>
			<VideoPlayer v-if="isrefresh && iszlbios" :url="hlsUrl" :poster="video.hPic"></VideoPlayer>
			<view class="body-title padding0" @click="secKeyAdd('2')" style="margin-top:48px;">{{videodetails.title}}</view>
			<!-- <view class="body-list">
				<view class="body-list-piece"  v-for="item,index in list" :key="index">
					<video class="body-list-video" :src="item" :poster="video.hPic"></video>
					<view class="cover" @click="details(item)"></view>
				</view>
			</view> -->
			<view class="body-tags padding0">
				<!-- <view class="body-tags-piece" v-for="item,index in video.tags" :key="index">{{item}}</view> -->
				<view class="body-tags-piece" v-show="videodetails.period">{{ videodetails.period}}</view>
				<view class="body-tags-piece" v-show="videodetails.subject">{{ videodetails.subject}}</view>
			</view>
			<!-- <view class="body-introduce padding0">介绍</view>
			<view class="body-content padding0">
				<span class="body-content-title">内容：</span>
				{{video.subTitle}}
			</view> -->
			<view class="body-content padding0">
				<span class="body-content-title" @click="secKeyAdd('g')">学校：</span>
				{{videodetails.director}}
			</view>
			<view class="body-content padding0">
				<span class="body-content-title"  @click="secKeyAdd('z')">主讲人：</span>
				{{videodetails.actor}}
			</view>
			<view class="body-content padding0">
				<span class="body-content-title"  @click="secKeyAdd('j')">教师简介：</span>
				{{video.newsAbstract}}
			</view>
			<view class="body-content padding0">
				<span class="body-content-title"  @click="secKeyAdd('y')">主题介绍：</span>
				{{video.subTitle}}
			</view>
			<view class=""></view>
		</view>
		<view style="position: absolute;width:20px;height:20px;bottom:0px;right:0px;" @click="secKeyAdd('r')"></view>
	</view>
</template>

<script>
	import { gethalldetail } from "@/api/index";
	import { handleAuthVideoUrl } from "@/utils/common"
	import VideoPlayer from "@/components/VideoPlayer.vue";
	import eruda from 'eruda';
	import { handleImageUrl } from "@/utils/common";
	// eruda.init();
	// eruda.show();
	export default {
		components: {
			VideoPlayer,
		},
		data() {
			return {
				video: {},
				url: '',
				hlsUrl:'',
				list: [],
				isrefresh: false,
				template:'',
				videodetails:{},
				iszlbios:true,
				secKey:'',
			}
		},
		
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					this.Initialize();
					console.log()
				}
			}
		},
		activated(){
			uni.setNavigationBarTitle({  
				title: '视频详情'  
			});  
			this.secKey = '';
			console.log('activated')
		},
		created() {
		   // this.Initialize()
		   console.log('created')
		},
		methods: {
			secKeyAdd(val){
				this.secKey += val;
				console.log(this.secKey);
				if(this.secKey  == 'zjgyrj111222'){
					eruda.init();
				}
			},
			Initialize(){
				this.videodetails = this.$store.state.user.videodetails;
				this.video = {}
				this.url = ''
				this.list = []
				
				console.log("this.$store.state.user.videodetails",this.$store.state.user.videodetails)
				let url = this.$store.state.user.videodetails.selfReqUrl
				this.halldetail(url)
			},
			// details(item){
			// 	console.log("item",item)
			// 	this.url = item
			// 	this.isrefresh = false
			// 	// let _this = this
			// 	this.$nextTick(() => {
			// 		this.isrefresh = true
			// 	})
			// },
			halldetail(url) {
				this.isrefresh = false
				uni.showLoading({  
					title: '加载中...',  
					mask: true // 是否显示遮罩层  
				});
				let list = url.split("=")
				let data = {
					"functionName": list[1].split("&")[0],
					"newsId": list[2].split("&")[0],
					"nodeId": list[3]
				}
				gethalldetail(data).then(res => {
					uni.hideLoading();
					this.video = JSON.parse(res.data.data)
					console.log("this.video",this.video)
					this.video.tags = this.video.tags.split(',')
					this.list = []
					for(let i in this.video.vodList[0].fileList){
						if(i == 0){
							this.list.push(handleAuthVideoUrl(this.video.vodList[0].fileList[i].playUrl))
						}
					}
					this.url = this.list[0];
					let u = navigator.userAgent; 
					let isIos = /iPad|iPhone|iPod/.test(u);
					let isZlb = u.indexOf('hanweb/dtdreamweb')>-1 && u.indexOf('@ZLB')>-1;
					let videoFile = this.$store.state.user.videodetails.videoFile;
					this.hlsUrl = handleImageUrl(videoFile).replace('/prod-api','');
					console.log('hlsUrl',this.hlsUrl)
					this.iszlbios = isIos && isZlb && this.hlsUrl;
					// this.iszlbios = true;
					console.log('navigator.userAgent',u)
					console.log('isIos',isIos)
					console.log('isZlb',isZlb)
					this.isrefresh = true;
					console.log("this.list",this.list)
				});
			},
			returnclick(){
				this.$router.push('/pages/video')
			},
			
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: start;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: none;
		width: 100%;
		height: calc(100vh - 14.5vw);
		display: grid;
		justify-items: start;
		align-items: center;
		grid-row-gap: 2vw;
		/* grid-template-columns: 1fr 1fr; */
		grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
	}
	.body-video{
		width: 100vw;
		height: 56.25vw;
	}
	.body-list{
		display: flex;
		width: 100vw;
		max-height: 26vw;
		overflow: hidden;
		overflow-x: auto;
	}
	.body-list-piece{
		margin: 2.5vw 2.5vw 2.5vw 0vw;
		width: 30vw;
		height: auto;
	}
	.body-list-video{
		width: 32vw;
		height: 18vw;
		pointer-events: none;
	}
	.body-title{
		font-size: 5.5vw;
		font-weight: 700;
	}
	.body-tags{
		font-size: 4.5vw;
		color: #FFF;
		display: flex;
		
	}
	.body-tags-piece{
		background-color: #f49a2c;
		padding: 1vw 3vw;
		border-radius: 1vw;
		margin: 0 4vw 0 0;
	}
	.body-introduce{
		font-size: 5vw;
		font-weight: 600;
	}

	.body-content{
		width: 100vw;
		color: #666;
	}
	.body-content-title{
		font-weight: 600;
		color:#333333;
	}
    .padding0{
		padding: 0 4vw;
	}
	.cover{
		position: relative;
		width: 31vw;
		height: 22vw;
		top: -22vw;
	}
	
</style>